<template>
    <div class=''>
            <van-tabs v-model="active" @click="change" animated>
                <van-tab v-for="(item,index) in cate" :key="index" :title="item.category_name" :name="item.category_id">
                    <ul class="ll">
                        <li v-for="item in getlist" :key="item.product_id" @click="gotodetail(item)">
                            <img :src="item.product_picture" alt="">
                            {{item.product_name}}
                            <p :style="{color:'red'}">￥{{item.product_price}}元</p>
                            <p>{{item.product_intro}}</p>
                        </li>
                    </ul>
                </van-tab>
            </van-tabs>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                scrollY: "",
                active: 0,
                cate: [],
                shoplist: [],
                getlist: [],
            };
        },
        mounted() {
            this.$axios.post("/product/getCategory").then((res) => {
                console.log(res)
                this.cate = res.data.category
            })
            this.change()

        },
        methods: {
            change() {
                this.$axios.post("/product/getAllProduct").then((res) => {
                    console.log(res)
                    this.shoplist = res.data.Product
                    this.getlist = res.data.Product.filter((res) => {
                        return res.category_id == this.active
                    })
                })

            },
            gotodetail(item) {
                this.$router.push({
                    path: "/detail",
                    query: {
                        item
                    }
                })
            }
        },
        beforeRouteLeave(to, from, next) {
            this.scrollY = document.querySelector(".ani-pager").scrollTop
            next()
            console.log(this.scrollY)
        },
        activated() {
            document.querySelector(".ani-pager").scrollTop = this.scrollY
        },
    };
</script>

<style lang='scss'>
    .ll {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 50px;

        li {
            width: 48%;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 3px;

            img {
                width: 80%;
            }
        }
    }
</style>